<template>
	<view class="" :style="[AppSkinVar]">
		<view class="coupon-center-scroll-view">
			<view class="e-p-l-20 e-p-r-20 e-p-t-32 e-p-b-30 e-flex e-m-b-20" v-for="item in 3" :key="item" :style="{background: `url(${$staticPath('coupon-item-bg.png')})`}">
				<view class="e-flex-1 e-p-10">
					<view class="e-flex fw-600 e-m-b-4 e-flex-xy-center" :style="{color: AppSkin.primary}" style="align-items: flex-end;">
						<text class="e-font-32 e-p-b-8">{{$unitEn}}</text>
						<text class="e-font-56">1</text>
					</view>
					<view class="e-font-20 text-center" :style="{color: AppSkin.primary}">
						满188元可用
					</view>
				</view>
				<view class="flex-2 e-p-10">
					<view class="c-333 fw-600 e-font-26 e-m-b-10">
						指定生鲜商品可用
					</view>
					<view class="e-m-b-12 e-p-t-6 e-p-r-8 e-p-b-4 e-p-l-8 use-box" :style="{color: AppSkin.primary,border: `1rpx solid ${AppSkin.primary}`}">
						部分商品可用
					</view>
					<view class="c-98 e-font-20">
						2021.09.17-2021.09.30
					</view>
				</view>
				<view class="e-flex-1">
					<view v-if="!item.useStatus" class="use-btn c-white e-font-24	e-flex e-flex-xy-center" @tap="backHome" :style="{background: AppSkin.gradientPrimary}">
						{{$t('user.去使用')}}
					</view>
				</view>
			</view>
			<view class="recommend-title e-flex-xy-center bg-white e-m-b-20">
				<view class="e-font-32 fw-600 e-rela">{{ $t('cart.猜您喜欢') }}</view>
			</view>
			<view class="">
				<goods-list class="e-m-t-20" :showIcon="false" :leftGoodsList="leftGoodsList" :rightGoodsList="rightGoodsList" :showLoad="showLoad" @getData="getGoodsData"></goods-list>
				<load-more :showLoad="showLoad"></load-more>
			</view>
		</view>
		<view class="bottom-box bg-white e-font-32 c-333 text-center">
			<view class="e-p-t-50 fw-600" @tap="$goTo('/pages/user/coupon/index')">
				{{$t('user.我的优惠券')}}
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useInit } from '@/common/stores';
	import { getPreferenceGoodsList } from '@/common/request/api'
	
	
	const ctx = useCurrentInstance()
	const {setTabbarPageIndex} = useInit()
	
	const showLoad = ref(false)
	const pageNum = ref(1)
	const leftGoodsList = ref([])
	const rightGoodsList = ref([])
	const isGetGoods = ref(true)
	
	
	const backHome = () => {
		setTabbarPageIndex(0);
		ctx.$switchTab('/pages/tabbar/index');
	}
	const getGoodsData = () => {
		if (isGetGoods.value && !showLoad.value) {
			showLoad.value = true
			getPreferenceGoodsList({
				pageSize: 10,
				pageNum: pageNum.value
			}).then(res => {
				showLoad.value = false
				if (res.code === 200) {
					let pageNum:any = ctx.$waterfallsPageLoad(leftGoodsList.value, rightGoodsList.value, res.rows, pageNum.value, 10)
					pageNum.value = pageNum
					if (leftGoodsList.value.length + rightGoodsList.value.length == res.total) {
						isGetGoods.value = false
					}
				}
				ctx.$emit('setReachBottom')
			})
		}
	}
	
	
	onShow(() => {
		getGoodsData()
	})
	onReachBottom(() => {
		getGoodsData()
	})

</script>

<style lang="scss" scoped>
	.coupon-center-scroll-view {
		background: #F7F7F7;
		padding-bottom: 150rpx;
		.coupon-platform {
			padding: 2rpx;
			border-radius: 50%;
		}
		.use-box {
			border-radius: 4rpx;
			display: inline-block;
		}
		.c-98 {
			color: #989898;
		}
	}
	.bottom-box {
		width: 100vw;
		height: 150rpx;
		position: fixed;
		bottom: 0;
	}
	.use-btn {
		bottom: 22rpx;
		right: 40rpx;
		border-radius: 25rpx;
		width: 144rpx;
		height: 50rpx;
	}
	
	.recommend-title {
		padding: 24rpx 0;
		view {
			padding: 0 68rpx;
			color: #303133;
			&::after,
			&::before {
				content: '';
				position: absolute;
				width: 68rpx;
				height: 2rpx;
				background-color: var(--color-primary);
				top: 50%;
			}
			&::after {
				left: -32rpx;
			}
			&::before {
				right: -32rpx;
			}
		}
	}
</style>